<script setup lang="ts">
import { ref, onMounted } from "vue"
const defaultImgUrl = ref("")
const name = ref("")
const imgList: string[]  = [
    "https://tse4-mm.cn.bing.net/th/id/OIP-C.NnYfAuDx7Ah9LRvId9Sr4wHaQC?w=180&h=340&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    "https://tse1-mm.cn.bing.net/th/id/OIP-C.ho2SRtqwVon-O0qQ8E-yNQHaLH?w=180&h=270&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    "https://tse3-mm.cn.bing.net/th/id/OIP-C.z88xI317Qhg4gdV1KCfTOAHaNK?w=180&h=321&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    "https://tse1-mm.cn.bing.net/th/id/OIP-C.7p3K1E8IM9d1FJ9mQwiYGQHaJ4?w=180&h=240&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    "https://tse4-mm.cn.bing.net/th/id/OIP-C.yNInOXQvwxBgu4RfCZYbigHaNE?w=115&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    "https://pic.rmb.bdstatic.com/bjh/64e266aecf8d34763a497514e6d7a7b22954.jpeg@h_1280",
    "https://q8.itc.cn/q_70/images01/20240204/2f89f0d12c0f4d76bf50b6e7b56ab368.jpeg",
    "https://img2.baidu.com/it/u=1894203907,2858592961&fm=253&fmt=auto&app=138&f=JPEG?w=682&h=612"
]
// 切换图片
const changeImage = () => {
    defaultImgUrl.value = imgList[~~(Math.random() * imgList.length)]
}
onMounted(() => {
    changeImage()
})
</script>
<!-- 数据驱动视图更新 鸿蒙 小程序 Vue React Angular -->
<template>
  <div class="container">
    <img :src="defaultImgUrl"/><br>
    <button @click="changeImage">切换图片</button><br>
    <input type="text" :value="name" >
    <button @click="name = '123'">修改值</button>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  text-align: center;
  margin: 100px auto;
}
.container img {
  width: 300px;
  height: 600px;
}
</style>